{% extends 'blog/base.html' %}

{% block title %}{{ post.title }} - 文章详情{% endblock %}

{% block section %}
<article class="article-container">
    <!-- 标题区 -->
    <div class="title-header has-text-centered">
        <h1 class="title is-2 has-text-weight-bold has-text-grey-dark">{{ post.title }}</h1>
        <div class="title-divider"></div>
    </div>

    <!-- 元信息 -->
    <div class="meta-info box">
        <div class="is-flex is-justify-content-space-between is-align-items-center">
            <div class="meta-group is-flex">
                <!-- 作者 -->
                <div class="meta-item">
                    <span class="icon has-text-info">
                        <i class="fas fa-user-edit"></i>
                    </span>
                    <span>{{ post.owner.username }}</span>
                </div>

                <!-- 发布日期 -->
                <div class="meta-item">
                    <span class="icon has-text-success">
                        <i class="far fa-calendar-alt"></i>
                    </span>
                    <span>{{ post.add_date|date:"Y/m/d" }}</span>
                </div>

                <!-- 最后更新 -->
                <div class="meta-item">
                    <span class="icon has-text-warning">
                        <i class="fas fa-sync-alt"></i>
                    </span>
                    <span>{{ post.pub_date|date:"Y/m/d" }}</span>
                </div>
            </div>

            <!-- 标签 -->
            {% if post.tags %}
            <div class="tag-item">
                <span class="icon has-text-danger">
                    <i class="fas fa-tag"></i>
                </span>
                <span class="tag is-danger is-light is-rounded">
                    {{ post.tags.name }}
                </span>
            </div>
            {% endif %}
        </div>
    </div>

    <!-- 作者详细信息 -->
    {% if user_profile %}
    <div class="author-details box clickable-card"
         onclick="window.location='{% url 'blog:author_detail' post.owner.id %}'"
         style="cursor: pointer; position: relative;">
        <div class="is-flex is-align-items-center">
            <!-- 头像 -->
            <div class="author-avatar mr-4">
                {% if user_profile.image %}
                <img src="{{ user_profile.image.url }}"
                     alt="用户头像"
                     class="is-rounded"
                     style="width: 80px; height: 80px; object-fit: cover;">
                {% else %}
                <div class="default-avatar">
                    <span class="icon has-text-grey-lighter">
                        <i class="fas fa-user-circle fa-3x"></i>
                    </span>
                </div>
                {% endif %}
            </div>
            <!-- 基本信息 -->
            <div class="author-info">
                <h3 class="is-size-5 has-text-weight-bold">
                    {{ user_profile.nike_name|default:post.owner.username }}
                </h3>
                <p class="is-size-7 has-text-grey-light">
                    {{ user_profile.personl_profile|truncatechars:40 }}
                </p>
                <!-- 查看详情提示 -->
                <div class="view-detail-prompt has-text-link is-size-7">
                    <span class="icon">
                        <i class="fas fa-external-link-alt"></i>
                    </span>
                    查看完整资料
                </div>
            </div>
        </div>
    </div>
    {% else %}
    <div class="box has-text-centered">
        <p class="has-text-grey">该用户未填写详细信息。</p>
    </div>
    {% endif %}

    <!-- 文章内容 -->
    <div class="content-box box">
        <div class="content">
            {{ post.content|safe }}
        </div>
    </div>

    <!-- 上下篇导航 -->
    <nav class="pagination-nav">
        <div class="columns is-variable is-3">
            <!-- 上一篇 -->
            <div class="column">
                {% if prev_post %}
                <a href="{% url 'blog:post_detail' prev_post.id %}" class="nav-card prev-card">
                    <div class="nav-direction">
                        <i class="fas fa-chevron-left"></i>
                    </div>
                    <div class="nav-content">
                        <div class="nav-label">上一篇</div>
                        <div class="nav-title">{{ prev_post.title|truncatechars:20 }}</div>
                    </div>
                </a>
                {% else %}
                <div class="nav-card prev-card is-inactive">
                    <div class="nav-content">
                        <div class="nav-label">已经是第一篇</div>
                        <div class="nav-subtitle">开始新的阅读旅程</div>
                    </div>
                </div>
                {% endif %}
            </div>

            <!-- 下一篇 -->
            <div class="column">
                {% if next_post %}
                <a href="{% url 'blog:post_detail' next_post.id %}" class="nav-card next-card">
                    <div class="nav-content">
                        <div class="nav-label">下一篇</div>
                        <div class="nav-title">{{ next_post.title|truncatechars:20 }}</div>
                    </div>
                    <div class="nav-direction">
                        <i class="fas fa-chevron-right"></i>
                    </div>
                </a>
                {% else %}
                <div class="nav-card next-card is-inactive">
                    <div class="nav-content">
                        <div class="nav-label">已是最后一篇</div>
                        <div class="nav-subtitle">探索更多精彩内容</div>
                    </div>
                </div>
                {% endif %}
            </div>
        </div>
    </nav>
</article>
{% endblock %}

{% block extra_css %}
<style>
    /* 作者详细信息 */
    .author-details {
        background: #f8f9fa;
        border-left: 4px solid #3273dc;
        margin: 2rem 0;
        padding: 1.5rem;
        transition: all 0.3s ease;
    }
    .author-avatar img {
        border-radius: 50%;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    .author-info {
        flex: 1;
        position: relative;
    }
    .author-info h3 {
        margin-bottom: 0.5rem;
    }
    .author-info p {
        margin-bottom: 1rem;
    }
    .author-info .icon {
        margin-right: 0.5rem;
    }

    /* 点击效果 */
    .clickable-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 5px 15px rgba(50, 115, 220, 0.2);
    }
    .view-detail-prompt {
        position: absolute;
        right: 0;
        bottom: 0;
        opacity: 0.8;
        transition: opacity 0.2s;
    }
    .clickable-card:hover .view-detail-prompt {
        opacity: 1;
    }
    .default-avatar {
        width: 80px;
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>
{% endblock %}